import React, { Component } from 'react';
import UserAdd from './user_add';
import UserList from './user_list';
import { connect } from 'dva';
import { Tabs, Menu, Checkbox, Icon, Dropdown, Button, Card, message } from 'antd';

const TabPane = Tabs.TabPane;

//例子地址
// https://www.yuque.com/yuxuanbeishui/zog1rm/eh1evo

@connect(({ auth_user }) => ({
  auth_user,
  tabActiveKey: auth_user.tabActiveKey,
  searchStatus: auth_user.searchStatus,
  dealStatus: auth_user.dealStatus,
}))
export default class UserIndex extends Component {
  handleTabsChange = key => {
    const { dispatch, tabActiveKey } = this.props;
    //改变tabs状态和清除tableRecordData
    dispatch({
      type: 'auth_user/show',
      payload: {
        tabActiveKey: key,
        tableRecordData: [],
      },
    });
  };

  handleSearchStatus = () => {
    const { dispatch, searchStatus } = this.props;
    //是否隐藏搜索框
    dispatch({
      type: 'auth_user/show',
      payload: {
        searchStatus: !searchStatus,
      },
    });
    //默认是开启
    searchStatus ? message.success('状态：查询关闭', 3) : message.success('状态：查询开启', 3);
  };

  handleDealStatus = () => {
    const { dispatch, dealStatus } = this.props;
    //是否隐藏搜索框
    dispatch({
      type: 'auth_user/show',
      payload: {
        dealStatus: !dealStatus,
      },
    });
    //默认是关闭
    dealStatus
      ? message.success('状态：批量操作关闭', 3)
      : message.success('状态：批量操作开启', 3);
  };

  render() {
    const { tabActiveKey, searchStatus, dealStatus } = this.props;
    const menu = (
      <Menu>
        <Menu.Item key="1">
          <Checkbox checked={searchStatus} onChange={this.handleSearchStatus}>
            <Icon type="search" />
            查询功能
          </Checkbox>
        </Menu.Item>

        <Menu.Item key="2">
          <Checkbox checked={searchStatus} onChange={this.handleDealStatus}>
            <Icon type="align-left" />
            批量操作
          </Checkbox>
        </Menu.Item>
      </Menu>
    );

    const operations = (
      <Dropdown overlay={menu}>
        <Button>
          更多操作 <Icon type="down" />
        </Button>
      </Dropdown>
    );

    return (
      <Card style={{ margin: '-1.8%' }}>
        <Tabs
          activeKey={activeKey}
          onChange={this.handleTabsChange}
          tabBarExtraContent={operations}
          tabBarGutter={-10}
        >
          <TabPane
            tab={
              <Button type="primary" style={{ fontWeight: '700' }}>
                用户列表
              </Button>
            }
            key="1"
          >
            <UserList />
          </TabPane>

          <TabPane tab={<Button style={{ fontWeight: '700' }}>新增用户</Button>} key="2">
            <UserAdd />
          </TabPane>
          {tabActiveKey === 3 ? (
            <TabPane
              tab={
                <Button type="dashed" style={{ fontWeight: '700' }}>
                  用户编辑
                </Button>
              }
              key="3"
              disabled
            >
              <UserAdd />
            </TabPane>
          ) : null}
        </Tabs>
      </Card>
    );
  }
}
